<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="6">
          <div @click="goBack"><i class="el-icon-arrow-left"></i></div>
        </el-col>
        <el-col :span="12" class="head-title">
          <div> 搜索</div>
        </el-col>
      </el-row>

    </el-header>
    <div class="spacing"></div>
    <el-main>
      <el-row type="flex" justify="center" class="search-row">
        <el-col :span="20">
          <el-input class="search" placeholder="搜索商品名称" prefix-icon="el-icon-search"></el-input>
        </el-col>
        <el-col :span="4" class="search-title">搜索</el-col>
      </el-row>
      <el-row class="list" justify="center">
        <el-col>
          <div class="goods_item" @click="selectFood(food,$event)">
            <div class="left">
              <img src="http://placehold.it/86x86/"></img>
            </div>
            <div class="right">
              <div>拿铁</div>
              <div>￥<span>36</span></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <v-shopcart v-show="isShow"></v-shopcart>
    <v-foodinfo  :food="selectedFood" ref="foodinfo"></v-foodinfo>
  </el-container>
</template>

<script type='text/ecmascript6'>
  import Foodinfo from 'components/Foodinfo/Foodinfo';
  import Shopcart from 'components/Shopcart/Shopcart';
  export default {
    name: 'index',
    components: {
      'v-foodinfo': Foodinfo,
      'v-shopcart': Shopcart,
    },
    created() {
    // 获取按钮组件的点击的元素，用在drop方法里
    this.$root.eventHub.$on('cart.hidden', this.hidden);
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      selectFood(food, event) {
        this.isShow = true;
        this.selectedFood = food;
        this.$refs.foodinfo.initShow();// 获取foodinfo组件的show方法
        console.log(food);
      },
      hidden(){
        this.isShow = false;
      }
    },
    data() {
      return {
        isShow:false,
        selectedFood: {},
        food: {
          'name': '皮蛋瘦肉粥',
          'price': 10,
          'oldPrice': '',
          'description': '咸粥',
          'sellCount': 229,
          'rating': 100,
          'info': '一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足',
          'ratings': [
            {
              'username': '3******c',
              'rateTime': 1469281964000,
              'rateType': 0,
              'text': '很喜欢的粥',
              'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
            },
            {
              'username': '2******3',
              'rateTime': 1469271264000,
              'rateType': 0,
              'text': '',
              'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
            },
            {
              'username': '3******b',
              'rateTime': 1469261964000,
              'rateType': 1,
              'text': '',
              'avatar': 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png'
            }
          ],
          'icon': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
          'image': 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750'
        }
      };
    }

  };





</script>

<style scoped>
  .el-header {
    height: 60px;
  }

  .el-row {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .head-title {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search input {
    border-radius: 50px;
    background: #eee;
  }

  .search-row {
    align-items: center;
    height: 32px;
  }

  .search-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
  }

  .spacing {
    position: relative;
    width: 96%;
    height: 10px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    background: #d4d6d9;
    border-radius: 50px;
  }

  .list > div {
    margin-top: 4vh;
  }

  .goods_item {
    display: flex;
    border-top: 0.1em solid #F5F5F5;
    padding-top: 2vh;
  }

  .goods_item .right {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 3vh;
  }

</style>
